<html>
	<head>
		<title>图片剪切保存demo</title>
		<meta charset="utf-8"/>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script src="jquery.Jcrop.min.js"></script>
		<link rel='stylesheet' type='text/css' href='jquery.Jcrop.min.css'/>
		
	</head>
	
	<body>
		<!-- 图片上传按钮，通过触发#realImgIpt实现文件上传 -->
		<a id="changeImg" href="javascript:void(0)" onclick="uploadImg()"><span>上传图片</span></a>
	
		<!-- 真正的图片上传按钮，为了美观隐藏显示 -->
		<input type="file" id="realImgIpt" style="display:none">
		
		<!-- 图片裁剪遮罩层 -->
		<div id="imgMask" class="mask ip"></div>
		
		<div class="onImgMask imgProcessDiv ip">
			<!-- 用于显示原图片的div，通过在内部添加img标签显示图片 -->
			<div class="addThemeImg"></div>
			<!-- 保存裁剪图片的画板 -->
			<canvas id="myCan" class="onImgMask ip" width="345" height="194"></canvas>
			<div class="imgBtn">
				<a href="javascript:void(0)" onclick="saveCut()">裁剪</a>
			</div>
		</div>
	</body>
	<script>
		$(function(){
			// 图片预览监听
			ct=document.getElementById("myCan");// 这里慎用$
			ctx=ct.getContext("2d");
			$("#realImgIpt").on('change', function() {
				if (typeof (FileReader) != "undefined") {
					let image_holder = $(".addThemeImg");
					image_holder.empty();

					let reader = new FileReader();
					$(".ip").show();
					reader.onload = function(e) {
						$("<img />", {
							"src" : e.target.result,
							"class" : "thumb-image",
							"id" : "target"
						}).appendTo(image_holder);
						
						$('#target').Jcrop({
							onChange : updatePreview,
							onSelect : updatePreview,
							aspectRatio : 345 / 194 //裁剪比例
						}, function() {
							let bounds = this.getBounds();
							boundx = bounds[0];
							boundy = bounds[1];
							let jcrop_api = this;
						});
					}
					image_holder.show();
					reader.readAsDataURL($(this)[0].files[0]);
				} else {
					alert("你的浏览器不支持FileReader.");
				}
			});
		})
		/* 点击上传图片按钮 */
		function uploadImg() {
			$("#realImgIpt").click();
		}
		/* 改变选框时，修改预览图 */
		function updatePreview(c) {
			if (parseInt(c.w) > 0) {
				// 更新canvas画板内容
				let img=document.getElementById("target");
				// 清空画板
				ctx.clearRect(0,0, ct.width, ct.height); 
				let realWidth = $("#target")[0].naturalWidth;
				let realHeight = $("#target")[0].naturalHeight;
				// .drawImage(图像对象,原图像截取的起始X坐标,原图像截取的起始Y坐标,原图像截取的宽度,原图像截取的高度，绘制图像的起始X坐标,绘制图像的起始Y坐标,绘制图像所需要的宽度,绘制图像所需要的高度);
				ctx.drawImage(img, c.x/boundx * realWidth,c.y/boundy * realHeight, c.w/boundx * realWidth, c.h/boundy * realHeight,0,0, ct.width, ct.height);
			}
		};
		/* 保存裁剪后的图片 */
		function saveCut(){
			let imgSrc = document.getElementById("myCan").toDataURL("image/png",0.4);// 将图片转化为base64编码，0.4表示清晰度
			$.post("url路径",{imageSrc:imgSrc},function(data){
				alert("上传成功")
			});
		}
	</script>
	<style>
			#changeImg {
				background: transparent;
				border: 0;
				font-size: 23px;
				cursor: pointer;
				text-decoration: none;
				color: #06E5FE;
			}
			#changeImg span:hover {
				color: #851efb;
			}
			.ip {
				display: none;
			}		
			.mask {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background: rgba(0, 0, 0, 0.8);
				display: none;
			}
			#realImgIpt {
				display: none;
			}
			#imgMask {
				z-index: 2000;
			}
			.onImgMask {
				z-index: 2001;
			}
			.imgProcessDiv {
				border-radius: 10px;
				width: 900px;
				height: 450px;
				background: rgba(69, 134, 144, 0.75);
				position: absolute;
				top: 10%;
				left: 21%;
			}
			.imgProcessDiv .addThemeImg {
				position: absolute;
				top: 2%;
				left: 2%;
				width: 500px;
				height: 400px;
				border: 1px solid @lightblue;
				background-color: rgba(0, 0, 0, 0.6);
				float: left;
			}
			.imgProcessDiv .addThemeImg .thumb-image {
				width: 500px;
			}
			.imgProcessDiv #myCan {
				position: absolute;
				top: 2%;
				right: 2%;
				float: right;
				width: 345px;
				height: 194px;
				border: 1px solid @lightblue;
			}
			.imgProcessDiv .imgBtn {
				width: 150px;
				height: 180px;
				float: right;
				position: absolute;
				right: 2%;
				top: 49%;
			}
			.imgProcessDiv .imgBtn a {
				text-decoration: none;
				font-size: 60px;
				display: block;
				color: #00c5ff;
				text-align: right;
			}
		</style>
</html>